來到了第八天，今天我們的重點是是 v-if v-show v-for 以及 template

v-if 與 v-show

我們先從這兩個看似很相近的內容開始說吧~
看到 if 就會想到它的好夥伴 else-if 和 else ，沒錯，在 Vue 的樣板中這些東西也存在

<div v-if="loading"></div>
<div v-else-if="error"></div>
<div v-else></div>

在 Vue 樣板中，if else 是用來判斷需不需要渲染的用途，適合用在初始化內容當中，由於這是對 DOM 的操作因此會稍微比較消耗效能，若只是想要隱藏內容那就使我們的好朋友 v-show 了

<div v-show="viewElement"></div>

v-show 其實非常單純，就是把 style 上一個 display: none; 而已，因此若是有著滿滿的 !important 你會看到新世界

v-for

在 Vue 中 v-for 絕對是被眾多人用爛的一個東西，尤其是 v-for 還不僅僅可以處理陣列，連物件他都一口氣包辦了，導致它的方便程度直線上升，我們來看看它怎麼用吧

<ul>
   <li v-for="(item, index) in menu" :key="index">{{item}}</li> 
</ul>
new Vue({
    data(){
        return {
            menu: ['apple', 'banana', 'pineapple']
        }
    }
})

根據以上的代碼，我們會看到在 DOM 上面長成這樣

<ul>
    <li>apple</li>
    <li>banana</li>
    <li>pineapple</li>
</ul>

雖然在畫面上看不到 v-bind:key 的用途，不過他可是很重要的
:key 是用來確保每個更新節點的獨立性，以確保再重新渲染的時候能夠正確的將值更新上去，並且由於指定了目標因此也可以提高效能，在上述代碼中，這是一個不太好的釋例因為單純使用 index 當位置更新但沒有被 Vue 偵測到後此列表的渲染相會持續出錯下去，因此在實例中通常還是會建議綁 item.id 或是 uuid 為主

當然，根據慣用手法我們很常會需要同時進行 for 以及 if else 的判斷式，雖然在不安裝 ESLint 的情況下可以這麼使用，但在 Vue 的官方文檔中並不建議這樣使用，原因是在 Vue2 中 v-for 會優先於 v-if 做事，因此這樣是一件比較消耗效能的事情，在這時我們就可以透過 template 標籤來做操作了

template

template 標籤本身是一個無意義且不會被渲染出來的內容，然而我們可以把他想成是一個外掛用的標籤，在上面寫一些判斷式，譬如說我們想要在確認 loading 結束後才渲染上面的 list 可以這樣做

<template v-if="!loading">
    <ul>
       <li v-for="(item, index) in menu" :key="index">{{item}}</li> 
    </ul>
</template>
<template v-else>
    <div>Loading...</div>
</template>

像是這樣我們就可以操作出豐富的頁面並且不用創造出一堆用不到的節點囉~

明天該來介紹 computed 以及 watch 兩個資料反饋的內容了，讓我們明天見
希望假日能夠順利產文，當天現做的，燙手啊